<template>

    <el-tabs v-model="activeName" @tab-click="handleClick">
<!--计算UFC页面-->
    <el-tab-pane label="计算UFC" name="first">
            <div>
        <el-table :data="tabledatas" border>
            <el-table-column label="请在表格中填入对应的个数">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.tab1"></el-input>
                    <span v-show=true>{{scope.row.tab1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="简单">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.simple"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.simple}}</span>
                </template>
            </el-table-column>
            <el-table-column label="一般">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.common"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.common}}</span>
                </template>
            </el-table-column>
            <el-table-column label="复杂">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.complex"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.complex}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="scope.row.show =true">编辑</el-button>
                    <el-button @click="getUFC(scope.row)">保存</el-button>
                </template>
            </el-table-column>
        </el-table>

<!--结果展示框-->
        <el-descriptions class="margin-top" title="计算结果" :column="3" :size="size" border/>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        UFC
      </template>
      {{UFC}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        VAF
      </template>
      {{VAF}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        FP
      </template>
      {{FP}}
    </el-descriptions-item>


        </div>

    </el-tab-pane>
<!--VAF页面-->
    <el-tab-pane label="计算VAF" name="second">
            <div>
        <el-table :data="tabledatas_VAF" border>
            <el-table-column label="序号">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.tab1"></el-input>
                    <span v-show=true>{{scope.row.tab1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="技术复杂性因素">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.factor"></el-input>
                    <span v-show=true>{{scope.row.factor}}</span>
                </template>
            </el-table-column>
            <el-table-column label="描述">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show=false v-model="scope.row.describe"></el-input>
                    <span v-show=true>{{scope.row.describe}}</span>
                </template>
            </el-table-column>
            <el-table-column label="影响">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.number"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.number}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button @click="scope.row.show =true">编辑</el-button>
                    <el-button @click="getVAF(scope.row)">保存</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-descriptions class="margin-top" title="计算结果" :column="3" :size="size" border/>
<!--结果展示框-->
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        UFC
      </template>
      {{UFC}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        VAF
      </template>
      {{VAF}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        FP
      </template>
      {{FP}}
    </el-descriptions-item>


        </div>
        
    </el-tab-pane>
    
  </el-tabs>


    

</template>
<script>
    module.exports = {
        data() {
            return {
                UFC:301,
                VAF:1.07,
                FP:322.07,

                tabledatas: [
                    { tab1: '外部输入', simple:6,common:2,complex:3,show:false}, //这里的show是指是否开启编辑，simple是第一列，common是第二列
                    { tab1: '外部输出',  simple:7,common:7,complex:0,show:false},
                    { tab1: '外部查询',  simple:0,common:2,complex:4,show:false},
                    { tab1: '外部文件',  simple:5,common:2,complex:3,show:false},
                    { tab1: '内部文件',  simple:9,common:0,complex:2,show:false},
                ],
                 tabledatas_VAF: [
                    { tab1: 1, factor:"数据通讯",describe:"软件系统的信息交互情况",number:3,show:false}, 
                    { tab1: 2, factor:"数据分布处理",describe:"软件系统如何处理分布数据",number:3,show:false},
                    { tab1: 3, factor:"系统性能",describe:"用户对系统的响应时间和吞吐量的要求",number:3,show:false},
                    { tab1: 4, factor:"使用配置",describe:"当前硬件平台的使用度",number:3,show:false},
                    { tab1: 5, factor:"事务处理频率",describe:"每日、每周以及每月等的事务处理情况",number:3,show:false},
                    { tab1: 6, factor:"在线数据输入",describe:"在线信息输入的百分比",number:3,show:false},
                    { tab1: 7, factor:"操作便利",describe:"软件系统是否为用户操作提供便利",number:3,show:false},
                    { tab1: 8, factor:"在线更新",describe:"有多少内部逻辑文件通过在线事务更新",number:3,show:false},
                    { tab1: 9, factor:"处理复杂度",describe:"软件系统是否广泛使用逻辑和数学运算",number:3,show:false},
                    { tab1: 10, factor:"复用性",describe:"本软件系统是否为多个应用系统复用",number:3,show:false},
                    { tab1: 11, factor:"安装难易",describe:"本软件系统是否为多个应用系统复用",number:3,show:false},
                    { tab1: 12, factor:"运行维护",describe:"软件系统的启动、备份以及恢复的难易",number:3,show:false},
                    { tab1: 13, factor:"多站点支持",describe:"软件系统是否用于多组织和多站点",number:3,show:false},
                    { tab1: 14, factor:"变更支持",describe:"软件系统对查询、统计以及变更维护的支持",number:3,show:false},

                ],


                activeName: 'first',//标签页默认展示页面

            }
        },
        methods: {
            //计算UFC
            getUFC(row){
                console.log("111111111111111111")
                console.log(this.tabledatas[0].simple)

                row.show = false;

                var url = "http://localhost:8080/api/fp/ufc?s="+this.tabledatas[0].simple+"&s="+this.tabledatas[0].common+"&s="+this.tabledatas[0].complex+
                "&s="+this.tabledatas[1].simple+"&s="+this.tabledatas[1].common+"&s="+this.tabledatas[1].complex+
                "&s="+this.tabledatas[2].simple+"&s="+this.tabledatas[2].common+"&s="+this.tabledatas[2].complex+
                "&s="+this.tabledatas[3].simple+"&s="+this.tabledatas[3].common+"&s="+this.tabledatas[3].complex+
                "&s="+this.tabledatas[4].simple+"&s="+this.tabledatas[4].common+"&s="+this.tabledatas[4].complex
                
	            
			        axios.post(url).then((res)=>{
                
                    this.UFC = res.data.data
                    this.FP = this.UFC*this.VAF
                
                    console.log(this.UFC)
			    	
			
			    })
        },
        getVAF(row){
                console.log("2222222222222222")
                console.log(this.tabledatas[0].number)

                row.show = false;
                
	            

                var url = "http://localhost:8080/api/fp/vaf?s="+this.tabledatas_VAF[0].number+"&s="+this.tabledatas_VAF[1].number+"&s="+this.tabledatas_VAF[2].number+
                "&s="+this.tabledatas_VAF[3].number+"&s="+this.tabledatas_VAF[4].number+"&s="+this.tabledatas_VAF[5].number+
                "&s="+this.tabledatas_VAF[6].number+"&s="+this.tabledatas_VAF[7].number+"&s="+this.tabledatas_VAF[8].number+
                "&s="+this.tabledatas_VAF[9].number+"&s="+this.tabledatas_VAF[10].number+"&s="+this.tabledatas_VAF[11].number+
                "&s="+this.tabledatas_VAF[12].number+"&s="+this.tabledatas_VAF[13].number


			        axios.post(url).then((res)=>{
                
                    this.VAF = res.data.data
                    this.FP = this.UFC*this.VAF
                
                    console.log(this.UFC)
			    	
			
			    })
        },
            handleClick(tab, event) {
                console.log(tab, event);
            },
      }
    }
</script>
